<template>
    <div class="search2" :class="searchTag ? 'searchOpen' : ''">
      <span class="search2-open" @click="openSearch2" :searchTag="searchTag" v-if="!searchTag">
      <svg class="icon" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg" p-id="1905" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
           height="16">
            <path
              d="M1012 947.52L717.12 652.64a390.56 390.56 0 1 0-65.76 69.92L944 1015.2z m-912-525.28a302.72 302.72 0 1 1 302.4 302.72A303.04 303.04 0 0 1 99.84 422.24z"
              fill="#000000" p-id="1906"></path>
          </svg>
    </span>
      <input v-if="searchTag" type="text" class="searchInput">
      <span class="search2-close" v-if="searchTag" @click="closeSearch2">
        <svg t="1543472160615" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="1792" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
             height="16"><path
          d="M991.914667 1024a32.085333 32.085333 0 0 1-22.528-9.386667L9.386667 54.613333A32.085333 32.085333 0 0 1 54.613333 9.386667L1014.613333 969.386667a32.085333 32.085333 0 0 1-22.698666 54.613333"
          fill="#000000" p-id="1793"></path><path
          d="M32.085333 1024a32.085333 32.085333 0 0 1-22.698666-54.613333L969.386667 9.386667a32.085333 32.085333 0 0 1 45.226666 45.226666L54.613333 1014.613333A32.085333 32.085333 0 0 1 32.085333 1024"
          fill="#000000" p-id="1794"></path></svg>
      </span>
    </div>
</template>

<script>
export default {
  name: 'search2',
  data () {
    return {
      searchTag: false
    }
  },
  methods: {
    openSearch2 () {
      console.log(this.searchTag)
      this.searchTag = !this.searchTag
    },
    closeSearch2 () {
      this.searchTag = !this.searchTag
    }
  }
}
</script>

<style scoped lang="less">
.search2{
  transition: all 0.4s;
  width: 40px;
  height: 40px;
  overflow: hidden;
  position: relative;
}
.searchOpen{
  transition: all 0.4s;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #e1e1e1;
  .searchInput{
    width: 100%;
    height: 100%;
    padding-left: 10px;
    border: none;
    outline: none;
  }
}
  .search2-open{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -8px;
    margin-left: -8px;
  }
  .search2-close{
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -8px;
  }
</style>
